<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>global object</title>
        <!--在html中通过script元素嵌入JavaScript脚本-->
        <script type="text/javascript">
            // 变量提升
            console.log( username ); // undefined
            console.log( window.username ); // undefined
            // 白话: script元素的开始标签和结束标签之间的作用域就是【全局作用域】
            // 在全局作用域用var直接定义的变量就是全局变量(即为`global object`定义了新的属性)
            var username = 'afang';
            console.log( username ); // afang
            console.log( window.username ); // afang
            console.log( globalThis.username ); // afang

            // 函数提升
            console.log( show );
            console.log( window.show );
            console.log( globalThis.show );
            // 在全局作用域用`函数声明`定义的函数就是全局函数(即为`global object`定义了新的函数)
            function show(){ console.log('i am show'); }
            console.log( show );
            console.log( window.show );
            console.log( globalThis.show );
        </script>

    </head>
    <body>
        <h1>global object</h1>
        <ul>
            <li>理解【全局作用域】(这里主要关注浏览器环境)</li>
            <li>在`global object`上定义属性(即定义全局属性或全局函数)</li>
        </ul>
        <p>请在浏览器终端中查看运行结果</p>

        <script type="text/javascript">
            console.log( username );
            console.log( globalThis.username );
            console.log( show );
            console.log( globalThis.show );
        </script>
    </body>
</html>